/*!
 * Ext JS Library 4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */

     ImageModel = Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'name'},
           {name: 'url'},
           {name: 'img'},
        ]
    });

Ext.define('MyDesktop.HomePanel', {
    extend: 'Ext.ux.desktop.Module',

    id:'homepanel-win',

    init : function(){
        this.launcher = {
            text: 'HomePanel',
            iconCls:'notepad'
        }
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('homepanel');
        if(!win){
            win = desktop.createWindow({
                id: 'homepanel',
                title:'HomePanel',
                width:600,
                height:400,
                iconCls: 'notepad',
                animCollapse:false,
                border: false,
                //defaultFocus: 'notepad-editor', EXTJSIV-1300

                // IE has a bug where it will keep the iframe's background visible when the window
                // is set to visibility:hidden. Hiding the window via position offsets instead gets
                // around this bug.
                hideMode: 'offsets',

                layout: 'fit',
                items:  MyDesktop.HomePanel.getView(),
            });
        }
        return win;
    },
    statics:{
        getView:function() {
             var store = Ext.create('Ext.data.Store', {
                model: 'ImageModel',
                proxy: {
                    type: 'ajax',
                    url: 'data/data.json',
                    reader: {
                        type: 'json',
                        root: 'images'
                    }
                }
            });
            store.load();

             var view =  Ext.create('Ext.view.View', {
                    store: store,
                    tpl: [
                        '<ul>',
                            '<tpl for=".">',
                                '<li> <a href="{url}" target="_blank" title="{name}">',
                                    '<img src="{img}" width="120" height="100" >',
                                    '</a> </li>',
                            '</tpl>',
                        '</ul>'
                    ],
                    height: 310,
                    itemSelector: 'div.thumb-wrap',
            });
            
            return view;
        }
    }
});
